<template>
  <div class="user-management-container">
    <el-card>
      <div slot="header">
        <span>用户管理</span>
      </div>
      
      <el-table
        v-loading="loading"
        :data="users"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          label="角色"
          width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isAdmin ? 'danger' : 'primary'">
              {{ scope.row.isAdmin ? '管理员' : '普通用户' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              :disabled="scope.row.isAdmin">删除</el-button>
            <el-button
              size="mini"
              @click="handleSendMessage(scope.row)">发送消息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 发送消息对话框 -->
    <el-dialog title="发送消息" :visible.sync="messageDialogVisible" width="500px">
      <el-form :model="messageForm" :rules="messageRules" ref="messageForm" label-width="100px">
        <el-form-item label="收件人">
          <span>{{ selectedUser ? selectedUser.username : '' }}</span>
        </el-form-item>
        <el-form-item label="消息标题" prop="title">
          <el-input v-model="messageForm.title" placeholder="请输入消息标题"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="content">
          <el-input type="textarea" v-model="messageForm.content" rows="4" placeholder="请输入消息内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="messageDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMessage">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, deleteUser } from '@/api/user'
import { formatDate } from '@/utils/date'
import axios from 'axios'

export default {
  name: 'UserManagement',
  data() {
    return {
      loading: false,
      users: [],
      messageDialogVisible: false,
      selectedUser: null,
      messageForm: {
        title: '',
        content: ''
      },
      messageRules: {
        title: [
          { required: true, message: '请输入消息标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入消息内容', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    formatDate,
    async fetchUsers() {
      this.loading = true
      try {
        const res = await getUserList()
        if (res.code === 200) {
          this.users = res.data
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('获取用户列表失败')
      } finally {
        this.loading = false
      }
    },
    handleDelete(row) {
      if (row.isAdmin) {
        this.$message.warning('不能删除管理员用户')
        return
      }
      
      this.$confirm(`确认删除用户 ${row.username}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await deleteUser(row.id)
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.fetchUsers()
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          this.$message.error('删除用户失败')
        }
      }).catch(() => {})
    },
    handleSendMessage(row) {
      this.selectedUser = row;
      this.messageForm = {
        title: '',
        content: ''
      };
      this.messageDialogVisible = true;
    },
    submitMessage() {
      this.$refs.messageForm.validate(async (valid) => {
        if (valid) {
          try {
            const params = new URLSearchParams();
            params.append('userId', this.selectedUser.id);
            params.append('title', this.messageForm.title);
            params.append('content', this.messageForm.content);
            
            const res = await axios.post('/api/admin/message/send', params).then(res => res.data);
            
            if (res.code === 200) {
              this.$message.success('消息发送成功');
              this.messageDialogVisible = false;
            } else {
              this.$message.error(res.message || '消息发送失败');
            }
          } catch (error) {
            this.$message.error('发送消息失败');
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.user-management-container {
  padding: 20px;
}
</style> 